<template>
    <div>

    </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { http } from '@/utils/http'
import config from '@/config'
import WS from '@/utils/ws.js'

import footballRed from '@/assets/table/img-football-red.png'
import footballBlue from '@/assets/table/img-football-blue.png'

const props = defineProps({
    selectedSound: String,
    settingOption1: Boolean,
    settingOption2: Boolean,
    NotificationQueue: Object,
    audioElement: Object
})

const sounds = ref({
    "静音": "",
    "默认": "http://tools.app.qubit-dance.com/sound/dx1.mp3",
    "声音1": "http://tools.app.qubit-dance.com/sound/dx2.mp3",
    "声音2": "http://tools.app.qubit-dance.com/sound/dx3.mp3",
    "声音3": "http://tools.app.qubit-dance.com/sound/dx4.mp3",
    "声音4": "http://tools.app.qubit-dance.com/sound/dx5.mp3"
})
// const audioElement = ref('');
const position = ref('') //位置

const ws = new WS({
    url: `ws://ws.new-api.dui-xian.com/info/message/`,
    onMessage(data) {
        if (data.type == 'score_message') {
            let b = JSON.parse(JSON.stringify(data.data))
            let a = ''
            if (b.score_team == 'home') {
                a = 'left'
            } else {
                a = 'right'
            }

            showNotification(b, a)

        }

    },
})

const showNotification = (match, direction) => {

    // 如果 "只提示关注" 被选中，且比赛没有关注（FA !== 1），则不显示通知
    if (props.settingOption1 && match.is_favo != 1) {
        return; // 只有当“只提示关注”选中且比赛是被关注的，才显示通知
    }

    // 如果 "提示窗" 没有选中，则仅播放声音，不显示通知

    if (!props.settingOption2) {
        if (props.audioElement) {
            props.audioElement.src = sounds.value[props.selectedSound];
            props.audioElement.play();
        }
        return; // 只播放音效，不显示通知
    }
    position.value = direction === "left" ? "top-left" : "top-right";
    // const goalImgSrc = direction === "left" ? footballRed : footballBlue;
    //播放选中的声音
    // console.log(props.audioElement);

    if (props.audioElement) {
        props.audioElement.src = sounds.value[props.selectedSound];
        console.log(props.audioElement.src);
        props.audioElement.play();
    }
    //     const [homeScore, awayScore] = (match.score).split(':');
    //     console.log("进球比赛数据", match)
    //     const notificationContent = `
    //   <div class="wit"></div>
    //   <div class="left-section">
    //     <img class="left-img" src="${goalImgSrc}" alt="ball" />
    //     <div class="timer">${match.live_time_str}'</div>
    //   </div>
    //   <div class="right-section">
    //     <div class="league">${match.league_name}</div>
    //     <div class="teams">
    //       <span class="team1">${match.home_name}</span>
    //       <span class="score">
    //         <span class="home-score">${homeScore}</span> 
    //         -
    //         <span class="away-score">${awayScore}</span>
    //       </span>
    //       <span class="team2">${match.away_name}
    //   </div>
    // `;
    match.direction = direction
    props.NotificationQueue.data.push({
        timestamp: Date.now(),
        data: match
    })
    console.log(props.NotificationQueue.data);



    // 将通知添加到相应的队列
};

onMounted(() => {
    // let data = {
    //     data: {
    //         "league_name": "league_name",
    //         "home_name": "home_name",
    //         "away_name": "away_name",
    //         "match_id": "123",
    //         "live_time_str": "58",
    //         "score": '3:2',
    //         "is_favor": 1,
    //         "score_team": "home"
    //     }
    // }


    // for (let i = 0; i < 10; i++) {
    //     setTimeout(() => {
    //         let a = ''
    //         if (data.data.score_team == 'home') {
    //             a = 'left'
    //         } else {
    //             a = 'right'
    //         }
    //         let b = JSON.parse(JSON.stringify(data.data))
    //         b.match_id += i
    //         showNotification(b, a)
    //     }, i * 2000);

    // }

})

onUnmounted(() => {
    ws.close()

})

</script>

<style lang="scss" scoped></style>